<script setup>
import userPinia from "~/pinia/user";
const { userName } = toRefs(userPinia());
const router = useRouter();
const globalStore = useStore();
const counter = useState("counter");
const changeName = () => {
  globalStore.value.nickName = "hi tony";
  userName.value = "hi tony";
};
const goAbout = () => {
  router.push("/detail/1/zhangli");
};
</script>
<template>
  <div
    class="w-[100px] text-[#fff] h-[40px] rounded-3xl bg-[#444] leading-[40px] text-center"
    @click="goAbout"
  >
    关于
  </div>
  {{ globalStore.nickName }}{{ counter }} {{ userName }}
  <div @click="changeName">用户信息</div>
  <div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
    <div
      class="bg-[#ccc] hover:bg-[#888] hover:scale-150 transition-transform"
    ></div>
    <div class="bg-[#ccc]">2</div>
    <div class="bg-[#ccc]">3</div>
    <div class="bg-[#ccc]">4</div>
  </div>
  <div
    class="w-full mt-4 flex items-center bg-[#eee] space-x-5 p-5 rounded-xl shadow-sm"
  >
    <div class="size-[45px] bg-[#ccc] rounded-sm"></div>
    <div>
      <div class="text-[#444] font-bold text-[12px] lg:text-2xl">闲聊</div>
      <div class="text-[#ccc]">您有新消息啦</div>
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
